<template>
	<div class="app-container">
    <div class="filter-container c-flex-row c-aligni-center c-justify-sb">
			<el-form class="form-container">
        <div class="margin-b10">
          <el-input @keyup.enter.native="handleFilter" v-model="listQuery.orderNo" clearable placeholder="订单号搜索" style="width: 200px;"></el-input>
          <el-input @keyup.enter.native="handleFilter" v-model="listQuery.goodsName" clearable placeholder="商品名称搜索" style="width: 200px;"></el-input>
          <el-input @keyup.enter.native="handleFilter" v-model="listQuery.mobile" clearable placeholder="手机号搜索" style="width: 200px;"></el-input>
          <!-- <el-select style="width: 120px;" v-model="listQuery.selectType" placeholder="请选择类型">
              <el-option
                v-for="item in typeOptions"
                :key="item.id"
                :label="item.value"
                :value="item.id">
              </el-option>
          </el-select> -->
          <el-date-picker type="date" :editable="false" value-format="yyyy-MM-dd" placeholder="下单时间（开始）" v-model="listQuery.pay_time" style="width:170px;"></el-date-picker>
          <el-date-picker type="date" :editable="false" value-format="yyyy-MM-dd" placeholder="下单时间（结束）" v-model="listQuery.end_time" style="width:170px;"></el-date-picker>
        </div>
        <el-select clearable style="width: 120px;" v-model="listQuery.selectPayType" placeholder="支付方式">
          <el-option key="1" value="1" label="微信支付"></el-option>
          <el-option key="2" value="2" label="余额支付"></el-option>
				</el-select>
        <el-select clearable style="width: 120px;" v-model="listQuery.selectPay" placeholder="状态">
          <el-option key="3" value="3" label="已收货"></el-option>
          <el-option key="2" value="2" label="待收货"></el-option>
          <el-option key="1" value="1" label="待发货"></el-option>
          <el-option key="-1" value="-1" label="未付款"></el-option>
				</el-select>
        <el-button class="search" @click="handleFilter">搜索</el-button>
        <el-button @click="handleDownload">导出Excel</el-button>
	    </el-form>
		</div>
		<div>
			<el-table :data="tableData" row-key="id" v-loading="listLoading" :header-row-style="{'font-family': 'PingFangSC-Semibold','backgroundColor': '#f5f7fa','color':'#5c6065'}" element-loading-text="加载中..." fit highlight-current-row class="c-width100 color-222 family-PingFangSC-Regular font-s12">
			 	  <!--<el-table-column align="center" label="订单号">-->
            <!--<template slot-scope="scope">-->
              <!--<span>{{scope.row.orderNo}}</span>-->
            <!--</template>-->
          <!--</el-table-column>-->
        <el-table-column align="center" label="名称">
          <template slot-scope="scope">
            <div class="clearfix">
            <div class="fl line-limit-length-180 text-alignL margin-b10" :title="scope.row.orderNo">订单号：{{scope.row.orderNo}}</div>
              <div class="fl">
              <el-popover
              placement="right"
              width="250"
              trigger="hover">
              <div slot="reference">下单时间:{{scope.row.createdAt}}</div>
              <div class="font-s12" v-if="scope.row.status >= 1">付款时间：{{scope.row.payAt}}</div>
              <div class="margin-t10 font-s12" v-if="scope.row.status >= 2">发货时间：{{scope.row.deliverAt}}</div>
              <div class="margin-t10 font-s12" v-if="scope.row.status >= 3">收货时间：{{scope.row.takeAt}}</div>
              <div class="font-s12" v-if="scope.row.status<1">暂无其他时间信息</div>
            </el-popover>
              </div>
            </div>
            <div class="c-overflow-h text-alignL margin-b10 order" v-for="(item, index) in scope.row.orderDetail">
              <img :src="item.avatar" width="80" height="80" class="fl margin-r pointer" @click="lookProduct(item.mgId)" title="点击查看商品">
              <div class="fl c-line-18">
                <div>
                  <div class="margin-b line-limit-length-200 font-s14" :title="item.goodsName + (item.subSpecs ? ('   规格：' + item.subSpecs) : '')">{{item.goodsName}}</div>
                  <div class="margin-b10">
                    <span class="color-999 text-decoration-line-through font-s12" v-if="item.originalPrice">原价：{{item.originalPrice}}元</span>
                    <span class="font-s12">{{item.price}}元</span>
                    <b class="c-fc-blue" v-if="scope.row.status==0&&permission == 3" @click="editPrice(item.godId, item.price, scope.$index)">[修改价格]</b>
                  </div>
                </div>
             </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column width="60" align="center" label="数量">
          <template slot-scope="scope">
            <div class="quantity" v-for="(item,index) in scope.row.orderDetail">{{item.quantity}}</div>
          </template>
        </el-table-column>
          <el-table-column width="140" align="center" label="购买者">
            <template slot-scope="scope">
              <div class="text-alignL" :class="{center:scope.row.headimgurl==null}">
                <img v-if="scope.row.nickname!=null" class="radius-50" width="30" height="30":src="scope.row.headimgurl||defultImg" @error="setDefultImg">
                <span v-if="scope.row.nickname!=null" class="margin-l10 margin-t10">{{scope.row.nickname}}</span>
              </div>
            </template>
			    </el-table-column>
        <el-table-column align="center" width="80" label="支付方式">
          <template slot-scope="scope">
            <span v-if="scope.row.payMethod == 1">微信支付</span>
            <span v-if="scope.row.payMethod == 2">余额支付</span>
          </template>
        </el-table-column>
        <el-table-column align="center" width="130" label="实付款">
          <template slot-scope="scope">
            <span class="font-bold">&yen{{scope.row.payMoney}}</span>
            <div v-if="scope.row.postage>0">(含邮费：&yen{{scope.row.postage}}元)</div>
            <div v-if="scope.row.deductedMoney>0">(积分抵扣：&yen{{scope.row.deductedMoney}})</div>
          </template>
        </el-table-column>
          <!--<el-table-column align="center" label="商品" width="200">-->
            <!--<template slot-scope="scope">-->
              <!--<div style="text-align:left;overflow:hidden;" v-for="(item, index) in scope.row.orderDetail" :title="item.goodsName + (item.subSpecs ? ('   规格：' + item.subSpecs) : '')">-->
                <!--<img :src="item.avatar" class="width50 pointer" @click="lookProduct(item.mgId)" title="点击查看商品">-->
                <!--<div class="fr c-line-18">-->
                  <!--数量：×{{item.quantity}}<br>-->
                  <!--实付：{{item.amount}}元<br>-->
                  <!--<span v-if="item.price"><s>原价：{{item.originalPrice}}元</s><br></span>-->
                  <!--<b class="c-fc-red" v-if="scope.row.status==0" @click="editPrice(item.godId, item.amount, scope.$index)">商品改价</b>-->
                <!--</div>-->
								<!--<div class="c-text-ellipsis1 c-width90">-->
                  <!--{{item.goodsName}}-->
                  <!--<span v-if="item.subSpecs" class="margin-r5">规格：{{item.subSpecs}}</span>-->
                <!--</div>-->
                <!--<hr v-if="index != scope.row.orderDetail.length - 1">-->
							<!--</div>-->
            <!--</template>-->
			    <!--</el-table-column>-->
          <!--<el-table-column align="center" label="邮费">-->
            <!--<template slot-scope="scope">-->
              <!--<span>{{scope.row.postage}}元</span>-->
            <!--</template>-->
			    <!--</el-table-column>-->
          <!--<el-table-column align="center" label="积分消耗/抵扣金额">-->
            <!--<template slot-scope="scope">-->
              <!--<span>{{scope.row.deductedPoints}}个<br>{{scope.row.deductedMoney}}元</span>-->
            <!--</template>-->
			    <!--</el-table-column>-->
          <!--<el-table-column align="center" label="实付金额">-->
            <!--<template slot-scope="scope">-->
              <!--<span>{{scope.row.payMoney}}元</span>-->
            <!--</template>-->
			    <!--</el-table-column>-->

          <!--<el-table-column  width="220" align="center" label="时间">-->
            <!--<template slot-scope="scope">-->
              <!--<span><b>下单时间：</b>{{scope.row.createdAt}}</span>-->
              <!--<span v-if="scope.row.status >= 1"><br><b>付款时间：</b>{{scope.row.payAt}}</span>-->
              <!--<span v-if="scope.row.status >= 2"><br><b>发货时间：</b>{{scope.row.deliverAt}}</span>-->
              <!--<span v-if="scope.row.status >= 3"><br><b>收货时间：</b>{{scope.row.takeAt}}</span>-->
            <!--</template>-->
          <!--</el-table-column>-->
          <el-table-column align="center" width="90" label="订单状态">
            <template slot-scope="scope">
              <span v-if="scope.row.status == 0" class="c-fc-red">未付款</span>
              <span v-if="scope.row.status == 1" class="c-fc-deepskyblue">待发货</span>
              <span v-if="scope.row.status == 2" class="c-fc-deepskyblue">待收货</span>
              <span v-if="scope.row.status == 3" class="c-fc-deepskyblue">已收货</span>
              <span v-if="scope.row.status == 4" class="c-fc-deepskyblue">已完成</span>
            </template>
			    </el-table-column>
			    <el-table-column align="center" label="操作" width="90">
            <template slot-scope="scope">
              <b @click="lookDetail(scope.row.goId, scope.$index)">订单详情</b>
              <b v-if="scope.row.status==2&&permission == 3" @click="receive(scope.row.goId, scope.$index)">确认收货</b>
              <!-- <b @click="lookProduct(scope.row.id)">查看商品</b> -->
              <b v-if="scope.row.status==1&&permission == 3" @click="sendGoods(scope.row.goId, scope.$index)">确认发货</b>
            </template>
			    </el-table-column>
		    </el-table>
		    <div class="block center">
			    <el-pagination
			      @size-change="handleSizeChange"
			      @current-change="handleCurrentChange"
			      :current-page="listQuery.page"
			      :page-sizes="[10, 20, 30, 50]"
			      :page-size="10"
			      layout="total, sizes, prev, pager, next, jumper"
			      :total="listQuery.total">
			    </el-pagination>
			</div>
		</div>
		<lookProduct v-if="isShowLookProduct" @hideLookProduct="hideLookProduct" :productId="productId"></lookProduct>
		<editPrice v-if="isShowEditPrice" @hideEditPrice="hideEditPrice" :productPrice="productPrice" :godId="godId" @successPrice="successPrice"></editPrice>
		<orderDetail v-if="isShowDetail" @hideDetail="hideDetail" :orderInfo="orderInfo"></orderDetail>
		<certainSend v-if="isShowSend" :ships="ships" :orderId="orderId" @hideSend="hideSend" @successSend="successSend"></certainSend>
	</div>
</template>
<script>
import { getOrdersList, orderHandle } from '@/api/goods'
import defultImg from '@/assets/default_head.png'
import lookProduct from './components/lookProduct.vue'
import editPrice from './components/editPrice.vue'
import orderDetail from './components/orderDetail.vue'
import certainSend from './components/certainSend.vue'
import { mall_orderList } from '@/utils/permission'
export default {
  components: {
    lookProduct,
    editPrice,
    orderDetail,
    certainSend
  },
  data() {
    return {
      defultImg,
      permission: 3,
      listQuery: {
        currentPage: 1, // 当前页
        orderNo: null,
        goodsName: null,
        mobile: null,
        total: null, // 数据总条数
        selectType: null, // 搜索的类型
        selectPay: null, // 是否付款
        selectPayType: null, // 搜索的付款方式
        pay_time: null, // 付款时间（开始）
        end_time: null, // 付款时间（结束）
        searchInput: null, // 搜索输入框的值
        page: 1
      },
      orderId: null, // 要改价的订单id
      productPrice: null, // 要改价的价格
      isShowLookProduct: false, // 是否显示查看商品组件
      isShowEditPrice: false, // 是否显示修改商品价格组件
      isShowDetail: false, // 是否显示订单详情
      isShowSend: false, // 是否显示确认发货组件
      listLoading: false,
      productId: null,
      tableIndex: null,
      typeOptions: [
        {
          id: 0,
          value: '类型一'
        }, {
          id: 1,
          value: '类型二'
        }, {
          id: 2,
          value: '类型三'
        }
      ],
      tableData: [],
      ships: [],
      orderInfo: [],
      godId: null,
      companyId: null,
      URLAPI: process.env.BASE_API
    }
  },
  created() {
    this.getModelPermission()
    this.getList()
  },
  methods: {
    setDefultImg(e) {
      e.target.src = defultImg
    },
    getModelPermission() {
      this.permission = mall_orderList()
    },
    getList() {
      this.listLoading = true
      getOrdersList(this.listQuery).then(res => {
        this.tableData = res.data.data.list.data
        this.listQuery.total = res.data.data.list.total
        this.ships = res.data.data.ships ? res.data.data.ships : []
        this.listLoading = false
        this.companyId = res.data.data.companyId
      }).catch(err => {
        console.log(err)
      })
    },
    sendGoods(goId, index) {
      this.isShowSend = true
      this.orderId = goId
      this.tableIndex = index
    },
    hideLookProduct(msg) { // 隐藏查看商品组件
      this.isShowLookProduct = msg
    },
    hideEditPrice(msg) {
      this.isShowEditPrice = false
    },
    hideDetail(msg) {
      this.isShowDetail = false
    },
    hideSend(msg) {
      this.isShowSend = false
    },
    successSend(res) {
      this.tableData[this.tableIndex].status = 2
      this.tableData[this.tableIndex].shipNo = res.shipNo
      this.tableData[this.tableIndex].shipName = this.ships.find(item => item.shipId == res.expressId).name
      this.tableData[this.tableIndex].deliverAt = res.deliverAt
      this.isShowSend = false
      this.tableIndex = null
    },
    lookProduct(id) { // 查看商品
      this.isShowLookProduct = true
      this.productId = id
    },
    editPrice(godId, price, index) { // 修改价格
      this.isShowEditPrice = true
      this.godId = godId
      this.productPrice = price
      this.tableIndex = index
    },
    successPrice(res) {
      this.isShowEditPrice = false
      // this.tableData[this.tableIndex].payMoney = this.tableData[this.tableIndex].payMoney - this.productPrice + (res.newPrice - 0)
      this.tableData[this.tableIndex].orderDetail.find(item => item.godId == res.godId)['price'] = res.newPrice
      var quantity = this.tableData[this.tableIndex].orderDetail.find(item => item.godId == res.godId)['quantity']
      this.tableData[this.tableIndex].payMoney = (this.tableData[this.tableIndex].payMoney - quantity * this.productPrice + (quantity * res.newPrice - 0)).toFixed(2)
    },
    lookDetail(id, index) { // 查看订单详情
      this.isShowDetail = true
      this.orderInfo = {
        name: this.tableData[index].takeName,
        address: this.tableData[index].province + this.tableData[index].city + (this.tableData[index].area ? this.tableData[index].area : '') + (this.tableData[index].address ? this.tableData[index].address : ''),
        mobile: this.tableData[index].mobile,
        postcode: this.tableData[index].postcode,
        shipName: this.tableData[index].shipName,
        shipNo: this.tableData[index].shipNo,
        postage: this.tableData[index].postage,
        isInvoce: this.tableData[index].isInvoce,
        invoiceTitle: this.tableData[index].invoiceTitle,
        invoiceMsg: this.tableData[index].invoiceMsg,
        invoiceCode: this.tableData[index].invoiceCode,
        msg: this.tableData[index].msg,
        mail: this.tableData[index].mail
      }
    },
    receive(goId, index) { // 确认收货
      this.$confirm('确定收货?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var data = {goId: goId, status: 3}
        orderHandle(data).then(res => {
          this.$message({
            type: 'success',
            message: '确认收货成功!'
          })
          this.tableData[index].status = 3
        }).catch(err => {
          console.log(err)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    handleSizeChange(val) { // 切换每页几条数据方法
      // console.log(`每页 ${val} 条`)
      this.listQuery.limit = val
      this.getList()
    },
    handleCurrentChange(val) { // 切换当前页
      // console.log(`当前页: ${val}`)
      this.listQuery.page = val
      this.getList()
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    evil(fn) {
      var Fn = Function
      return new Fn('return ' + fn)()
    },
    handleDownload() {
      var form = ''
      if (this.listQuery.orderNo) {
        form += '&orderNo=' + this.listQuery.orderNo
      }
      if (this.listQuery.goodsName) {
        form += '&goodsName=' + this.listQuery.goodsName
      }
      if (this.listQuery.userTypeValue) {
        form += '&userTypeValue=' + this.listQuery.userTypeValue
      }
      if (this.listQuery.mobile) {
        form += '&mobile=' + this.listQuery.mobile
      }
      if (this.listQuery.selectType) {
        form += '&selectType=' + this.listQuery.selectType
      }
      if (this.listQuery.selectPay) {
        form += '&selectPay=' + this.listQuery.selectPay
      }
      if (this.listQuery.selectPayType) {
        form += '&selectPayType=' + this.listQuery.selectPayType
      }
      if (this.listQuery.pay_time) {
        form += '&pay_time=' + this.listQuery.pay_time
      }
      if (this.listQuery.end_time) {
        form += '&end_time=' + this.listQuery.end_time
      }
      window.open(this.URLAPI + '/excel/excelGoodsOrders?companyId=' + this.companyId + form)
    }
  }
}
</script>

<style scoped>
  .order:last-of-type {
    margin-bottom: 0;
  }
  .quantity{
    padding: 25px 0;
  }

</style>
